<template>
    <div class="mine">
        <van-nav-bar title="我的" :fixed="true"  @click-right="goNotice">
            <van-icon v-if="info>0" slot="right" :info="info">
                <img class="messages" :src="messageIcon" alt="消息" />
            </van-icon>
            <van-icon v-else slot="right">
                <img class="messages" :src="messageIcon" alt="消息" />
            </van-icon>
        </van-nav-bar>
        <section class="user_info">
            <div class="content">
                <img v-if="userInfo.fd_sta_photo" :src="userInfo.fd_sta_photo" alt="用户头像">
                <img v-else :src="pic" alt="用户头像">
                <ul>
                    <li><h2>{{userInfo.fd_sta_name}} <em>{{userInfo.fd_jobs_name}}</em> </h2></li>
                    <li>{{userInfo.organic_name}}</li>
                    <li class="telphone">手机号码：{{userInfo.fd_sta_mobile}}</li>
                    <li>入职时间：{{userInfo.fd_sta_jobtime}}</li>
                    <li>转正时间：{{userInfo.turn_positive_time}}</li>
                </ul>
                <span>{{userInfo.fd_cuslevel_name}}</span>
            </div>
        </section>
        <section class="base_list">
            <van-cell title="修改密码" size="large" is-link icon="edit" to="/changePassword"></van-cell>
            <van-cell title="关于智能办公" size="large" :value="version" icon="info-o"></van-cell>
        </section>
        <p class="login_out" @click="showPopup=true">退出登录</p>
        <van-popup v-model="showPopup">
            <section class="popup_content">
                <p>您确定要退出吗？</p>
                <footer>
                    <van-button type="default" @click="loginOut(0)">取消</van-button>
                    <van-button type="danger" @click="loginOut(1)">确定</van-button>
                </footer>
            </section>
        </van-popup>
        <Loading v-show = "showLoading"></Loading>
    </div>
</template>
<script>
import Loading from "@/components/Loading.vue";
import { profile,noticeNum } from "@/request/api.js";
import config from '../../../package.json';
export default {
    name:'Mine',
    data(){
        return {
            version:'版本号：' + config.version,
            showLoading:true,
            info:0,
            messageIcon:require('@/assets/images/message_icon.png'),
            pic:require('@/assets/images/morentouxiang.png'),
            userInfo:{},
            showPopup:false,
            token:''
        }
    },
    components:{Loading},
    mounted(){
        this.token = this.$store.state.token;
        noticeNum({token:this.token}).then(res=>{
            let data = res.data;
            // console.log(data)
            this.info = data.unread_message;
            this.showLoading = false;
        }).catch(error=>{
            console.log(error)
            this.showLoading = false;
        })
        //个人信息
        profile({token:this.$store.state.token}).then(res=>{
        //    console.log(res);
           this.showLoading = false;
           this.userInfo = res.data.staffer;
        }).catch(err=>{
            console.log(err)
            this.showLoading = false;
        });
    },
    methods:{
        goNotice(){
            this.$router.push({name:'notice'})
        },
        loginOut(type){
            if (type==1) {
                localStorage.clear();
                this.$store.commit('setTabbarActive',0);
                this.$store.commit('setToken','');
                this.$store.commit('setStaffer_id','');
                this.showPopup = false;
                this.$router.push({name:'login'});
            } else {
                this.showPopup = false;
            }
        }
    }
}
</script>
<style lang="less" scoped>
.mine{
    width: 100%;
    height: auto;
    padding-bottom: 60px;
    padding-top: 44px;
    box-sizing: border-box;
    .messages{width: 20px;}
    .user_info{
        width: 100%;
        height: auto;
        padding: 15px;
        box-sizing: border-box;
        background: #fff;
        .content{
            width: 100%;
            height: 100%;
            padding: 22px 0 22px 22px;
            box-sizing: border-box;
            background: linear-gradient(45deg,#28d4c7,#48d1af);
            border-radius: 10px;
            box-shadow: 0 0 2px rgb(40,212,199),0 0 8px rgb(72,209,175);
            overflow: hidden;
            position: relative;
            img{
                display: block;
                width: 42px;
                height: 42px;
                float: left;
                border-radius: 50%;
                border-bottom: 3px solid #fff;
                box-sizing: border-box;
                box-shadow: 0 0 12px rgba(27, 27, 27, .1);
            }
            span{
                display: block;
                width: 80px;
                height: 27px;
                position: absolute;
                right: 0;
                top: 22px;
                line-height: 27px;
                text-align: center;
                background: #ffb924;
                color: #fff;
                font-size: 12px;
                font-family: 'PingFang-SC-Bold';
                border-top-left-radius: 15px;
                border-bottom-left-radius: 15px;
            }
            ul{
                float: left;
                width: 80%;
                height: 100%;
                padding-left: 12px;
                box-sizing: border-box;
                font-size: 12px;
                color: #fff;
                font-family: 'PingFang-SC-Medium';
                li{
                    margin-top: 6px;
                }
                li:first-child{
                    margin-top: 0;
                    font-size: 16px;
                    font-weight: normal;
                    em{font-size: 12px;font-weight: normal;}
                }
                .telphone{margin-top: 22px;}
            }
            
        }
    }
    .base_list{margin-top: 10px;}
    .login_out{
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #02ccbd;
        font-size: 14px;
        font-family: 'PingFang-SC-Bold';
        cursor: pointer;
        background: #fff;
        border-top: 1px solid #f7f7f7;
    }
    .van-popup{
        width: 80%;
        border-radius: 10px;
    }
    .popup_content{
        width: 100%;
        padding: 20px;
        background: #fff;
        box-sizing: border-box;
        text-align: center;
        p{
            font-size: 20px;
            color: #151617;
            line-height: 40px;
        }
        footer{
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .van-button{
                line-height: 40px;
                font-size: 15px;
                color: #999;
                border: none;
            }
            .van-button--danger{
                background: #fff;
                color: #ff2a00;
            }
        }
    }
}

.van-nav-bar{
    background-color: #fff;
    height: 44px;
    line-height: 44px;
    font-family: 'PingFang-SC-Bold';
    .van-nav-bar__title{
        color: #151617;
        font-size: 17px;
    }
}
/deep/ .van-nav-bar .van-icon{color: #999;font-size: 28px;}
/deep/ .van-info{
    font-size: 10px;
    border: none;
}
.van-cell--large .van-cell__title{font-size: 14px;color: #151617;font-family: 'PingFang-SC-Bold';}
.van-cell__left-icon, .van-cell__right-icon{
    font-size: 20px;
}
.van-cell__right-icon{color: #999;}
.van-icon-edit{color: #48d1a9;font-weight: bolder;}
.van-icon-info-o{color: #ffab15;font-weight: bolder;}
.van-cell__value{
    font-size: 12px;
    color: #999;
    font-family: 'PingFang-SC-Medium';
}
</style>